<template>
	<div style="margin-right: 30px">
		<el-form ref="formObj" :model="wyform" :rules="rules" label-width="100px">
			<el-form-item label="角色" prop="name">
				<el-input placeholder="请输入角色名称" v-model="wyform.name"></el-input>
			</el-form-item>
			<el-form-item label="说明" prop="description">
				<el-input placeholder="请输入说明" v-model="wyform.description"></el-input>
			</el-form-item>
			<el-form-item label="权限" prop="permission">
				<el-input placeholder="请输入权限" v-model="wyform.permission"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" plain :icon="Save" @click="save">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
import Save from '@/components/icons/save.vue'
import { ref,reactive } from 'vue'
import { get,post } from '@/plugins/axios'
import { _axios } from '@/plugins/axios';
import url from './util'
const emits = defineEmits(['update:show','getTableData'])
const props = defineProps(['id'])


const formObj = ref()
const wyform = reactive({
  id: null,
  name: '',
  description: '',
  permission: ''
})
const rules = reactive({
	name: [
		{ required: true, message: '请输入角色名称', trigger: 'blur' }
	],
	description: [
		{ required: true, message: '请输入角色说明', trigger: 'blur' }
	],
	permission: [
		{ required: true, message: '请输入角色权限', trigger: 'blur' }
	],
})

function save(){
	post(props.id ? url.update : url.add,wyform,content =>{
		emits('update:show',false)
		emits('getTableData')
	},formObj)
}	
function getById(){
	get('tRole/getById',{ id:props.id },content => {
		for(const key in wyform){
			if(Object.prototype.hasOwnProperty.call(content,key) ) 
			{
				wyform[key] = content[key]
			}
		}
		console.dir(wyform)
	})
}
if(props.id){
	wyform.id = props.id
	getById()
}

function uploadFile (file) {
	wyform.file = file.raw
}
function removeFile () {
	wyform.file = null
}
</script>

<style>
</style>